<template>
  <div class="userfooter">
    <!-- 负荷趋势 -->
    <div class="footlittle">
      <div class="title">节能潜力</div>
      <div class="tablebox">
        <template>
          <el-table
            :data="tableData"
            :size="'mini'"
            border
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            v-loading="loading"
            height="calc(100% - 1px)"
            style="width: 100%">
            <el-table-column
              type="index"
              align="center"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="equipName"
              label="设备名称">
            </el-table-column>
            <el-table-column
              prop="yearElectricValue"
              label="年用电量(kWh)">
            </el-table-column>
            <el-table-column
              prop="ratio"
              label="节能潜力(%)">
            </el-table-column>
            <el-table-column
              align="right"
              prop="yearSaveValue"
              label="年预估节能量(kWh)">
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <div class="footlittle">
      <div class="title">碳排放</div>
      <div class="gouchengandzhibiao">
        <div class="tanpie">
          <div class="paiechart" ref="paiechart"></div>
          <div class="text">碳排放构成</div>
        </div>
        <div class="tanzhi">
          <div class="zjiechart" ref="zjiechart"></div>
          <div class="text">{{ entityvalue.surplusValue }}(吨)</div>
          <div class="text" style="margin-top: 8px;">年剩余碳排放指标</div>
        </div>
      </div>
    </div>
    <div class="footlittle">
      <div class="title" style="height: 20px;">能耗异常</div>
      <div class="yichangbox" ref="yichangbox">
        <div class="little" v-for="(item,index) in yichanglist" :key="index">
          <div class="yichangtop">
            <div class="shebei">{{ item.devName }}</div>
            <!-- <div class="type">{{ item.measureName }}</div> -->
            <div class="type">{{ item.alarmTime }}</div>
          </div>
          <!-- <div class="yichangbut">{{ item.alarmTime }}</div> -->
          <div class="yichangbut">{{ item.eventDesc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getqianliapi,getttanpaiapi,getyichangshebeiapi} from '@/api/energy-consumption/GeneralSituation/UserPage' 
import TableColumn from '@/components/Table/index.vue'
import {infinitScroll} from '@/utils/array'
export default {
  name: 'CallPoliceUserfooter',
  components: {
    TableColumn
  },
  props: ['companyId','componobj'],
  data() {
    return {
      loading:false,
      tableData: [],
      entityvalue: {},
      yichanglist: []
    };
  },

  mounted() {
    
  },

  methods: {
    async getfooterlist() {
      this.loading=true
      const { data: { list } } = await getqianliapi({companyId:this.companyId})
      this.tableData=list
      this.loading = false
      const orgNo=this.componobj.orgNo
      const orgType=this.componobj.bizOrgType
      const yichang = await getyichangshebeiapi({ _pageNo: 0, _pageSize: 100, isProcessed: false, orgNo, orgType, alarmType: 314 })
      this.yichanglist = yichang.data.list
      if(this.yichanglist.length) infinitScroll(this.$refs.yichangbox)
      const { data: { entity } } = await getttanpaiapi({ companyId: this.companyId })
      this.entityvalue=entity
      this.gettanpaigoucheng(entity.structureList)
      this.gettanpaizhibiao(entity)
    },
    // 获取碳排放构成
    gettanpaigoucheng(list) {
      var chartDom = this.$refs.paiechart
      var myChart = echarts.init(chartDom);
      const formattedArray = list.map(item => {
          const monthNumber = new Date(item.timeReading + '-01').getMonth() + 1;
          return monthNumber + "月";
      })
      const data = list.map((item, index) => {
        return {
          value: item.valueReading,
          name:formattedArray[index]
        }
      })
      var option;
      option = {
      color: ['#1a90fe', '#66cbff', '#16ccc0','#f2d649','#91cc75','#ee6666','#ea7ccc','#9a60b4','#fc8452','#3ba272','#fac858','#5470c6'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '5%',
        left: 'center'
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 获取碳排放指标
    gettanpaizhibiao(entity) {
      var chartDom = this.$refs.zjiechart
      var myChart = echarts.init(chartDom);
      console.log(+entity.surplusValue/+entity.totalValue,999999999);
      
      var option
      option = {
      series: [{
        type: 'gauge',
        min: 0,
        max: 100,
        radius: '85%',
        center:['50%','60%'],
        // splitNumber: 10,
        axisLabel: {
          distance: -5,
          fontSize: 10,
          color: 'rgba(146, 179, 207, 1)',
        },
        progress: {
          show: true,
          width: 8,
          itemStyle: {
            color: "#16ccc0"
          }
        },
        axisLine: {
          lineStyle: {
            width: 8,
            // color: [[0.6, '#16ccc0'], [0.8, '#16ccc0'], [1, '#16ccc0']]
          }
        },
        splitLine: {
          show:false
        },
        axisTick: {
          show: false
        },
        itemStyle: {
          color: '#16ccc0',
          borderColor: '#16ccc0',
          borderWidth: 2
        },
        detail: {
          fontSize:16,
          formatter:  function (params) {
          return Math.floor(params )  + ' %';
        }
        },
        data: [{
          value: (+entity.surplusValue/+entity.totalValue)*100,
          title: {
            color: '#464646',
            // 标题颜色
          },
          detail: {
            color: '#16ccc0',
            // 数据详情颜色
            offsetCenter: ['0%', '70%'],
          },
        },
        ],
      },
      ],
    };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  },
};
</script>

<style scoped>
.title{
  font-weight: bold;
  font-size: 16px;
  color: #323232;
}
.userfooter{
  height: 100%;
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
    justify-content: space-between;
    .footlittle{
      background-color: #fff;
      padding: 20px 20px 10px 20px;
      height: 100%;
      overflow: hidden;
      .yichangbox{
        height: calc(100% - 20px);
        overflow-x: hidden;
        overflow: hidden scroll;
        .little{
          margin: 8px 0;
          .yichangtop{
            display: flex;
            justify-content: space-between;
            .shebei{
              font-size: 14px;
              color: #000;
            }
            .type{
              font-size: 14px;
              color: #646464;
            }
          }
          .yichangbut{
            /* display: flex;
            justify-content: flex-end; */
            font-size: 14px;
            
            color: #E72F2B;
          }
        }
      }
      .gouchengandzhibiao{
        height: 90%;
        display: flex;
        .tanzhi{
          width: 50%;
          text-align: center;
          .text{
            height:16px;
            color: #323232;
          }
          .zjiechart{
            height: calc(100% - 40px);
          }
        }
        .tanpie{
          width: 50%;
          text-align: center;
          .text{
            height: 16px;
            color: #323232;
          }
          .paiechart{
            height: calc(100% - 16px);
          }
        }
      }
      .tablebox{
        height: 90%;
        margin-top: 5px;
      }
    }
}
::v-deep  .el-table__body-wrapper::-webkit-scrollbar {
    /*width: 0;宽度为0隐藏*/
    width: 0px;
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 2px;
    height: 50px;
    background: #eee;
  }

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.4);
  }
  ::v-deep .el-table th.gutter{
    display: none;
    width:0
  }
  ::v-deep .el-table colgroup col[name='gutter']{
    display: none;
    width: 0;
  }

  ::v-deep .el-table__body{
    width: 100% !important;
  }
  ::v-deep .el-progress__text{
  display: none !important;
}
 ::v-deep .gundong::-webkit-scrollbar {
        display: none !important;
    }
    ::v-deep ::-webkit-scrollbar {
    display: none;
}
</style>